<template>
  <div id="login-bg">
    <div class="left">
      <img alt="" :src="require('@/assets/login/login-pic.svg')" />
    </div>
    <div class="right">
      <div class="title">基础后台系统</div>
      <div class="login-panel">
        <div id="login-title">SIGN IN</div>
        <el-form id="login-form" :model="loginForm" ref="loginForm" :rules="rules">
          <el-form-item prop="username">
            <div class="border-wrapper">
              <input class="login-input" type="text" name="username" autocomplete="off" placeholder="USERNAME"
                v-model="loginForm.username" />
            </div>
          </el-form-item>
          <el-form-item prop="password">
            <div class="border-wrapper">
              <input class="login-input" type="password" name="password" autocomplete="off" placeholder="PASSWORD"
                v-model="loginForm.password" @keyup.enter="handleLogin" />
            </div>
          </el-form-item>
          <div class="login-btn" @click="handleLogin">
            立即登录
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456"
      },
      loading: false,
      redirect: undefined,
      rules: {
        username: [{ required: true, trigger: "blur", message: "账号不能为空" }],
        password: [{ required: true, trigger: "blur", message: "密码不能为空" }]
      },
      otherQuery: {}
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store
            .dispatch("login", this.loginForm)
            .then(() => {
              // http://events.jianshu.io/p/868f6f780db0
              this.$router.push({ path: this.redirect || "/", query: this.otherQuery }).catch(() => {
              })
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
  }
}
</script>

<style scoped lang="scss">
#login-bg {
  width: 100%;
  height: 100vh;
  background-color: #293146;
  display: flex;
  color: white;

  &::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: -48%;
    background-image: url('~@/assets/login/login-bg-dark.svg');
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    content: '';
  }
}

.left {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;

  img {
    width: 60vh;
    height: 60vh;
  }
}

.right {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;

  .title {
    font-size: 50px;
    max-width: 30vw;
    position: fixed;
    top: 15vh;
    right: 25%;
    transform: translateX(50%);
    text-align: center;
    letter-spacing: 12px;
  }

  .login-panel {
    .border-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 55px;
      background-image: linear-gradient(to right, #e8198b, #0eb4dd);
      border-radius: 55px;
    }

    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #282D3E inset;
      -webkit-text-fill-color: white;
      -webkit-animation-delay: 9999s;

      &:hover, &:active, &:focus {
        -webkit-animation-delay: 9999s;
      }
    }

    .login-input {
      background: #282D3E;
      height: calc(100% - 4px);
      width: calc(100% - 4px);
      border-radius: 55px;
      border: none;
      text-align: center;
      color: white;
      outline: none;
      font-size: 15px;
    }

    .login-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: bold;
      background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3a, #03a9f4);
      background-size: 400%;
      line-height: 52px;
      border-radius: 52px;
      margin-top: 60px;
      cursor: pointer;
      position: relative;
      z-index: 1;
      box-shadow: #FFFFFFB6 0 0 25px inset;

      &::before {
        content: "";
        position: absolute;
        top: -5px;
        left: -5px;
        right: -5px;
        bottom: -5px;
        background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3a, #03a9f4);
        background-size: 400%;
        border-radius: 52px;
        filter: blur(20px);
        z-index: -1;
      }

      &:hover {
        animation: shuai 8s infinite;

        &::before {
          animation: shuai 8s infinite;
        }
      }
    }

    @keyframes shuai {
      100% {
        background-position: -400% 0;
      }
    }

    #login-title {
      font-size: 40px;
      font-weight: bold;
      width: 100%;
      text-align: center;
      margin-bottom: 40px;
    }

    #login-form {
      width: 350px;
      margin: auto;
      padding-bottom: 40px;
    }
  }
}
</style>
